<template>
  <div>
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="模拟报价">
        <a-row>
          <a-col :span="24" style="display: flex; align-items: center;">
            <a-descriptions bordered>
              <a-descriptions-item label="发货信息">
                <div style="display: flex; justify-content: center; align-items: center;">
                  <a-select style="margin-left: 5px" :options="deliveryCountry" v-model:value="deliveryInfo.fromCountry"></a-select>
                  <a-input  style="margin-left: 5px;" v-model:value="deliveryInfo.fromState" placeholder="州" />
                  <a-input  style="margin-left: 5px;" v-model:value="deliveryInfo.fromCity" placeholder="城市" />
                  <a-input  style="margin-left: 5px;" v-model:value="deliveryInfo.fromZipcode" placeholder="编码" />
                </div>
              </a-descriptions-item>
            </a-descriptions>
            <DoubleRightOutlined style="font-size: 14px;margin-left: 10px" v-if="!showDelivery" @click="showDelivery=true"/>
            <DoubleLeftOutlined style="font-size: 14px;margin-left: 10px" v-if="showDelivery" @click="showDelivery=false"/>
            <div v-if="showDelivery">
              <span style="margin-left: 10px">载入数据：</span>
              <a-select style="width: 200px;margin-left: 5px" :options="skuOptions" v-model:value="skuValue1"></a-select>
              <a-button type="primary" style="margin-left: 5px" :loading="deliveryLoading" @click="load('delivery')">载入</a-button>
            </div>
          </a-col>
          <a-col :span="24" style="display: flex; align-items: center;margin-top: 20px;">
            <a-descriptions bordered >
              <a-descriptions-item label="收货信息">
                <div style="display: flex; justify-content: center; align-items: center;">
                  <a-select style="margin-left: 5px" :options="receiveCountry" v-model:value="receiveInfo.toCountry"></a-select>
                  <a-input  style="margin-left: 5px;" v-model:value="receiveInfo.toState" placeholder="州" />
                  <a-input  style="margin-left: 5px;" v-model:value="receiveInfo.toCity" placeholder="城市" />
                  <a-input  style="margin-left: 5px;" v-model:value="receiveInfo.toZipcode" placeholder="编码" />
                  <a-select placeholder="服务等级" style="margin-left: 5px;" :options="serviceOptions" v-model:value="receiveInfo.specialService">
                  </a-select>
                </div>
              </a-descriptions-item>
            </a-descriptions>
            <DoubleRightOutlined style="font-size: 14px;margin-left: 10px" v-if="!showReceive" @click="showReceive=true"/>
            <DoubleLeftOutlined style="font-size: 14px;margin-left: 10px" v-if="showReceive" @click="showReceive=false"/>
            <div v-if="showReceive">
              <span style="margin-left: 10px">载入数据：</span>
              <a-input style="width:200px" placeholder="请输入易仓订单号" v-model:value="skuValue2"></a-input>
              <a-button type="primary" style="margin-left: 5px" :loading="receiveLoading" @click="load('receive')">载入</a-button>
            </div>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;">
            <a-button @click="addSku">新增SKU</a-button>
            <DoubleRightOutlined style="font-size: 14px;margin-left: 10px" v-if="!showSku" @click="showSku=true"/>
            <DoubleLeftOutlined style="font-size: 14px;margin-left: 10px" v-if="showSku" @click="showSku=false"/>
            <a-input placeholder="请输入产品sku" v-if="showSku" style="margin-left: 10px;width: 200px" v-model:value="sku"></a-input>
            <a-button v-if="showSku" type="primary" style="margin-left: 5px" :loading="skuLoading" @click="load('sku')">载入</a-button>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;">
            <a-radio-group v-model:value="types" name="radioGroup" @change="changeTypes">
              <a-radio value="US">美制：inch + lb</a-radio>
              <a-radio value="EU">欧制：cm + kg</a-radio>
            </a-radio-group>
          </a-col>
          <a-col :span="12" style="margin-top: 20px;">
            <div>
              <a-table :pagination="false" v-if="skuList && skuList.length > 0" size="middle"  bordered :columns="columns" :dataSource="skuList">
                <template #bodyCell="{ column, record,index }">
                  <template v-if="column.key === 'action'">
                    <a-button danger type="primary" @click="del(record,index)">删除</a-button>
                  </template>
                  <template v-if="column.dataIndex === 'length' || column.dataIndex === 'width' || column.dataIndex === 'height' || column.dataIndex === 'weight' || column.dataIndex === 'units'">
                    <a-input-number @change="changeNum(column.dataIndex, record)" :min="0" v-model:value="record[column.dataIndex]" style="width: 100px" />
                  </template>
                </template>
              </a-table>
            </div>
          </a-col>
          <a-col :span="24" style="margin-top: 10px;">
            <a-button type="primary" style="width:120px;height:60px;font-size:20px;" :loading="askLoading" @click="askQuotation">问价</a-button>
          </a-col>
          <a-col :span="24" style="margin-top: 10px;">
            <common-table v-if="priceList && priceList.length > 0" size="middle"  bordered :columns="priceColumns"
                           :dataSource="priceList"
                           :slots="['accesoriesList','carrierCode']">
              <template #accesoriesList="{record}">
                <div v-for="(item,index) in record.accesoriesList">
                  <span>{{index + 1 + '、服务名：' + item.serviceName + '   费用：' + item.chargeAmount}}</span>
                </div>
              </template>
              <template #carrierCode="{record}">
                {{(record.carrierCode ? record.carrierCode : "") + "(" + (record.carrierName ? record.carrierName : "") + ")"}}
              </template>
            </common-table>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane key="2" tab="批量报价">
        <a-row>
          <a-col :span="24" style="display: flex; align-items: center;">
            <a-descriptions bordered>
              <a-descriptions-item label="发货信息">
                <div style="display: flex; justify-content: center; align-items: center;">
                  <a-select style="margin-left: 5px" :options="deliveryCountry" v-model:value="deliveryInfo.fromCountry"></a-select>
                  <a-input  style="margin-left: 5px;" v-model:value="deliveryInfo.fromState" placeholder="州" />
                  <a-input  style="margin-left: 5px;" v-model:value="deliveryInfo.fromZipcode" placeholder="编码" />
                </div>
              </a-descriptions-item>
            </a-descriptions>
            <DoubleRightOutlined style="font-size: 14px;margin-left: 10px" v-if="!showDelivery" @click="showDelivery=true"/>
            <DoubleLeftOutlined style="font-size: 14px;margin-left: 10px" v-if="showDelivery" @click="showDelivery=false"/>
            <div v-if="showDelivery">
              <span style="margin-left: 10px">载入数据：</span>
              <a-select style="width: 200px;margin-left: 5px" :options="skuOptions" v-model:value="skuValue1"></a-select>
              <a-button type="primary" style="margin-left: 5px" :loading="deliveryLoading" @click="load('delivery')">载入</a-button>
            </div>
          </a-col>
          <a-col :span="24" style="display: flex;align-items: center;margin-top: 20px;">
            <a-descriptions bordered>
              <a-descriptions-item label="收货信息">
                <div style="display: flex; justify-content: center; align-items: center;">
                  <a-select style="margin-left: 5px" :options="receiveCountry" v-model:value="receiveInfo.toCountry"></a-select>
                  <a-input  style="margin-left: 5px;" v-model:value="receiveInfo.toState" placeholder="州" />
                  <a-input  style="margin-left: 5px;" v-model:value="receiveInfo.toZipcode" placeholder="编码" />
                  <a-select placeholder="服务等级" style="margin-left: 5px;" :options="serviceOptions" v-model:value="receiveInfo.specialService"></a-select>
                </div>
              </a-descriptions-item>
            </a-descriptions>
            <DoubleRightOutlined style="font-size: 14px;margin-left: 10px" v-if="!showReceive" @click="showReceive=true"/>
            <DoubleLeftOutlined style="font-size: 14px;margin-left: 10px" v-if="showReceive" @click="showReceive=false"/>
            <div v-if="showReceive">
              <span style="margin-left: 10px">载入数据：</span>
              <a-select style="width: 200px;margin-left: 5px" :options="addressOptions" v-model:value="selectState"></a-select>
              <a-button type="primary" style="margin-left: 5px" :loading="receiveLoading" @click="loadState">载入</a-button>
            </div>
          </a-col>
        </a-row>
        <div style="margin-top: 10px;">
          <span>欧洲: </span>
          <a-checkbox-group v-model:value="EurGroup" name="EurGroup" :options="batchOptions.EurOptions" />
        </div>
        <div style="margin-top: 10px;">
          <span>加拿大: </span>
          <a-checkbox-group v-model:value="CaGroup" name="CaGroup" :options="batchOptions.CaOptions" />
        </div>
        <div style="margin-top: 10px;">
          <span>美国: </span>
          <a-checkbox-group v-model:value="UsGroup" name="UsGroup" :options="batchOptions.UsOption" />
        </div>
        <div style="margin-top: 10px;">
          <span>英国: </span>
          <a-checkbox-group v-model:value="UkGroup" name="UkGroup" :options="batchOptions.UkOption" />
        </div>
        <div style="margin-top: 10px;">
          <span>澳大利亚: </span>
          <a-checkbox-group v-model:value="AUGroup" name="AUGroup" :options="batchOptions.AUOption" />
        </div>
        <a-button type="primary" style="width:120px;height:60px;font-size:20px;" :loading="askLoading" @click="batchAsk">问价</a-button>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script setup>
import { ref,reactive,onMounted } from 'vue'
import commonTable from "@/components/commonTable/index.vue";
import {
  batchSimulationPriceRate,
  getPkgAddress, getPkgSkuList,
  getProductListForMapping,
  getWarehouseInfo, simulationPriceRate,
  warehouseOverseaList
} from "@/api/tail/mockQuotation.js";
import {addressOptions,batchAddress,batchOptions} from "@utils/stateField.js";
import {message} from "ant-design-vue";
const sku = ref('')
const types = ref('US')
const showSku = ref(false)
const showDelivery = ref(false)
const showReceive = ref(false)
const columns = [
  {
    title: 'SKU',
    dataIndex: 'warehouseSku',
    align: 'center',
  },
  {
    title:'长',
    dataIndex: 'length',
    align: 'center',
  },
  {
    title:'宽',
    dataIndex: 'width',
    align: 'center',
  },
  {
    title:'高',
    dataIndex: 'height',
    align: 'center',
  },
  {
    title:'重量',
    dataIndex: 'weight',
    align: 'center',
  },
  {
    title:'数量',
    dataIndex: 'units',
    align: 'center',
  },
  {
    title:'操作',
    dataIndex: 'action',
    key:'action',
    align: 'center',
  }
]
const priceColumns = [
  {
    title: '平台',
    align: 'center',
    dataIndex: 'platform',
    key: 'platform',
  },
  {
    title: '承运商',
    align: 'center',
    dataIndex: 'carrierCode',
    key: 'carrierCode',
  },
  {
    title: '币种',
    align: 'center',
    dataIndex: 'currencyCode',
    key: 'currencyCode',
  },
  {
    title: '基础费',
    align: 'center',
    dataIndex: 'lineCharge',
    key: 'lineCharge',
  },
  {
    title: '燃油费',
    align: 'center',
    dataIndex: 'fuelCharge',
    key: 'fuelCharge',
  },
  {
    title: '附加服务费',
    align: 'center',
    dataIndex: 'accessorialCharge',
    key: 'accessorialCharge',
  },
  {
    title: '总金额',
    align: 'center',
    dataIndex: 'totalCharge',
    key: 'totalCharge',
  },
  {
    title: '服务等级',
    align: 'center',
    dataIndex: 'carrierGuarantee',
    key: 'carrierGuarantee',
  },
  {
    title: '附加服务列表',
    align: 'center',
    dataIndex: 'accesoriesList',
    key: 'accesoriesList',
  }
]
const priceList = ref([])
const UsGroup = ref([])
const EurGroup = ref([])
const CaGroup = ref([])
const UkGroup = ref([])
const AUGroup = ref([])
const deliveryInfo = reactive({
  fromCountry:'US',
  fromZipcode:'',
  fromState:'',
  fromCity:'',
})
const receiveInfo = reactive({
  toCountry:'US',
  toZipcode:'',
  toState:'',
  toCity:'',
  specialService:''
})
const deliveryLoading = ref(false)
const receiveLoading = ref(false)
const skuLoading = ref(false)
const askLoading = ref(false)
const skuOptions = ref([])
const deliveryCountry = [
  {
    label: 'US | 美国',
    value: 'US'
  },
  {
    label: 'CA | 加拿大',
    value: 'CA'
  },
  {
    label: 'DE | 德国',
    value: 'DE'
  },
  // 英国
  {
    label: 'GB | 英国',
    value: 'GB'
  },
  {
    label: 'AU | 澳大利亚',
    value: 'AU'
  }
]
const serviceOptions = [
  {
    label:'OD',
    value:'OD'
  },
  {
    label:'IDD',
    value:'IDD'
  },
  {
    label:'WGD',
    value:'WGD'
  },
  {
    label:'ASSY',
    value:'ASSY'
  },
]
const receiveCountry = [
  {
    label: 'US | 美国',
    value: 'US'
  },
  {
    label: 'CA | 加拿大',
    value: 'CA'
  },
  {
    label: 'DE | 德国',
    value: 'DE'
  },
  {
    label: 'FR | 法国',
    value: 'FR'
  },
  {
    label: 'IT | 意大利',
    value: 'IT'
  },
  // 比利时
  {
    label: 'BE | 比利时',
    value: 'BE'
  },
  // 波兰
  {
    label: 'PL | 波兰',
    value: 'PL'
  },
  // 摩纳哥
  {
    label: 'MC | 摩纳哥',
    value: 'MC'
  },
  // 英国
  {
    label: 'GB | 英国',
    value: 'GB'
  },
  {
    label: 'CH | 瑞士',
    value: 'CH'
  },
  {
    label: 'AT | 奥地利',
    value: 'AT'
  },
  {
    label: 'NL | 荷兰',
    value: 'NL'
  },
  {
    label: 'LU | 卢森堡',
    value: 'LU'
  },
  {
    label: 'PT | 葡萄牙',
    value: 'PT'
  },
  {
    label: 'DK | 丹麦',
    value: 'DK'
  },
  {
    label: 'SE | 瑞典',
    value: 'SE'
  },
  {
    label: 'NO | 挪威',
    value: 'NO'
  },
  {
    label: 'FI | 芬兰',
    value: 'FI'
  },
  {
    label: 'CZ | 捷克',
    value: 'CZ'
  },
  {
    label: 'HU | 匈牙利',
    value: 'HU'
  },
  {
    label: 'BG | 保加利亚',
    value: 'BG'
  },

  {
    label: 'SK | 斯洛伐克',
    value: 'SK'
  },
  {
    label: 'RO | 罗马尼亚',
    value: 'RO'
  },
  {
    label: 'MD | 摩尔多瓦',
    value: 'MD'
  },
  {
    label: 'HR | 克罗地亚',
    value: 'HR'
  },
  {
    label: 'ES | 西班牙',
    value: 'ES'
  },
  {
    label: 'AU | 澳大利亚',
    value: 'AU'
  }
]
const skuList = ref([])
const skuValue1 = ref('')
const skuValue2 = ref('')
const selectState = ref('')
const activeKey = ref('1')
const del = (_,index) => {
  skuList.value.splice(index,1)
  message.success('删除成功')
}
const changeTypes = (e) => {
  skuList.value.forEach(v => {
    v.length = e.target.value === 'US' ? v.lengthInch : v.lengthCm
    v.width = e.target.value === 'US' ? v.widthInch : v.widthCm
    v.height = e.target.value === 'US' ? v.heightInch : v.heightCm
    v.weight = e.target.value === 'US' ? v.weightLb : v.weightKg
  })
}
const changeNum = (key, record) => {
  if(types.value === 'US'){
    if(key === 'weight'){
      record[key +'Lb'] = record[key]
    }else if (key !== 'qty'){
      record[key +'Inch'] = record[key]
    }
  }else{
    if(key === 'weight'){
      record[key +'Kg'] = record[key]
    }else if (key !== 'qty'){
      record[key +'Cm'] = record[key]
    }
  }
}
const loadState = () => {
  receiveInfo.toCountry = batchAddress[selectState.value].country
  receiveInfo.toState = batchAddress[selectState.value].state
  receiveInfo.toZipcode = batchAddress[selectState.value].zipcode
}
const load = async (type) => {
  try{
    if(type === 'delivery'){
      deliveryLoading.value = true
      let res = await getWarehouseInfo({
        warehouseCode: skuValue1.value.trim(),
      })
      deliveryInfo.fromCountry = res.result.country
      deliveryInfo.fromZipcode = res.result.zipcode
      deliveryInfo.fromCity = res.result.city
      deliveryInfo.fromState = res.result.state
    }else if (type ==='receive'){
      receiveLoading.value = true
      let res = await getPkgAddress({
        saleOrderCode: skuValue2.value.trim(),
      })
      receiveInfo.toCountry = res.result.country
      receiveInfo.toZipcode = res.result.zipcode
      receiveInfo.toCity = res.result.city
      receiveInfo.toState = res.result.state
      if (activeKey.value == '1') {
        let res = await getPkgSkuList({
          saleOrderCode: skuValue2.value,
        })
        skuList.value.push(...res.result.records.map(v => {
          return {
            ...v,
            length: types.value === 'US' ? v.lengthInch : v.lengthCm,
            width: types.value === 'US' ? v.widthInch : v.widthCm,
            height: types.value === 'US' ? v.heightInch : v.heightCm,
            weight: types.value === 'US' ? v.weightLb : v.weightKg,
            units: v.qty,
          }
        }))
      }
    }else if (type ==='sku'){
      skuLoading.value = true
      const res = await getProductListForMapping({
        sku: sku.value,
      })
      console.log(types.value)
      skuList.value.push(...res.result.records.map(v => {
        return {
          ...v,
          length: types.value === 'US' ? v.lengthInch : v.lengthCm,
          width: types.value === 'US' ? v.widthInch : v.widthCm,
          height: types.value === 'US' ? v.heightInch : v.heightCm,
          weight: types.value === 'US' ? v.weightLb : v.weightKg,
          units: v.qty,
        }
      }))
    }
  }catch (e){
    message.error(e.message)
  }finally {
    deliveryLoading.value = false
    receiveLoading.value = false
    skuLoading.value = false
  }
}
const addSku = () => {
  skuList.value.push({
    warehouseSku: 'SKU' + skuList.value.length,
    length: '0',
    width: '0',
    height: '0',
    weight: '0',
    units: '0',
    lengthInch: '0',
    widthInch: '0',
    heightInch: '0',
    weightLb: '0',
    lengthCm: '0',
    widthCm: '0',
    heightCm: '0',
    weightKg: '0',
  })
}
const init = async () => {
  try{
    const res = await warehouseOverseaList()
    console.log(res)
    skuOptions.value = res.result.records.map(v => {
      return {
        value: v.warehouse_code,
        label: `${v.warehouse_country} | ${v.warehouse_code}`,
      }
    })
  }catch (e){
    message.error(e.message)
  }
}
const askQuotation = async () => {
  try{
    askLoading.value = true
    const res = await simulationPriceRate({
      ...deliveryInfo,
      ...receiveInfo,
      skuList: skuList.value,
      measureCode: types.value === 'US' ? 'lb' : 'kg',
    })
    priceList.value = res.result.records
  }catch (e){
    message.error(e)
  }finally {
    askLoading.value = false
  }
}

const batchAsk = async () => {
  try{
    askLoading.value = true
    const res = await batchSimulationPriceRate({
      ...deliveryInfo,
      ...receiveInfo,
      carriers:[...UsGroup.value,...EurGroup.value,...CaGroup.value,...UkGroup.value,...AUGroup.value]
    })
    console.log(res)
  }catch (e){
    message.error(e)
  }finally {
    askLoading.value = false
  }
}
onMounted(()=>{
  init()
})
</script>
<style scoped>
:deep(.ant-select-selector){
  min-width: 100px
}
</style>
